<template>
  <div class="container" v-infinite-scroll="load">
    <div class="head">
      <el-image
        style="width: 300px; height: 300px; border-radius: 10px"
        :src="baseUrl + info.image"
      />
      <div class="right">
        <span class="title">{{ info.title }}</span>
        <div class="user">
          <el-icon><User /></el-icon>
          <span>{{ info.user?.nickname }}</span>
        </div>
        <span class="style">风格：{{ info.style[0] }}</span>
        <div class="tips">
          <span class="desc">{{ info.desc }}</span>
          <span class="time">{{ "发行日期：" + info.create_time }}</span>
        </div>
        <div class="btns">
          <el-button
            size="large"
            @click="play"
            type="primary"
            :icon="CaretRight"
            >播放</el-button
          >
          <el-button @click="musicCollect" size="large" type="primary" plain>
            <i
              style="margin-right: 10px"
              :class="[
                'iconfont',
                collect ? 'icon-jushoucanggift' : 'icon-jushoucang',
              ]"
            ></i>
            <span>收藏</span>
          </el-button>

          <el-dropdown trigger="click" @visible-change="visiChange">
            <el-button
              style="margin-left: 12px"
              size="large"
              type="primary"
              plain
              :icon="Plus"
              >添加到</el-button
            >
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  @click="visiCommand(item)"
                  v-for="(item, index) in songsList"
                  :key="index"
                  >{{ item.title }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="comment">
      <div class="title">
        <span>评论</span>
        <span>（共{{ total }}条评论）</span>
      </div>
      <el-input
        v-model="comment"
        type="textarea"
        placeholder="说说你的看法吧"
        maxlength="300"
        :autosize="{ minRows: 3, maxRows: 6 }"
      />
      <div class="publish">
        <el-button size="small" @click="publishComment(0)" type="primary"
          >发表评论</el-button
        >
      </div>
      <div class="item" v-for="(item, index) in commentList" :key="index">
        <div class="user_info">
          <el-avatar :size="40" :src="baseUrl + item.user?.avatar" />
          <div class="right">
            <span>{{ item.user?.nickname }}</span>
            <span>{{ item.create_time }}</span>
          </div>
        </div>
        <div class="comment_info">
          <span>{{ item.content }}</span>
        </div>
        <div class="like">
          <el-icon
            @click="like(item, index)"
            :class="item.is_like ? 'is_like' : ''"
            size="18"
            ><Star
          /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CaretRight, Plus } from "@element-plus/icons-vue";
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { PersistentStore } from "@/stores";
import { ElMessage } from "element-plus";
import {
  musicInfo,
  musicCollectIsCollect,
  musicCollectAdd,
  musicCollectDel,
  musicCommentAdd,
  musicCommentIndex,
  musicLikeAdd,
  musicLikeDel,
  songsMy,
  songsListAdd,
} from "@/http/api";
const route = useRoute();
const router = useRouter();
const baseUrl = import.meta.env.VITE_API_URL;
const persistentStore = PersistentStore();
const collect = ref(false);
const info = ref({
  style: [],
});
const comment = ref("");
const commentList = ref([]);
const page = ref(0);
const more = ref(true);
const total = ref(0);
const songsList = ref([]);

onMounted(() => {
  //   getInfo();
  //   isCollect();
});

const play = () => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: 0, list: [info.value] };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};

const getCommentList = async () => {
  const { data } = await musicCommentIndex({
    music_id: route.query.id,
    page: page.value,
    limit: 10,
  });
  data.music_comment.data.length
    ? commentList.value.push(...data.music_comment.data)
    : (more.value = false);
  total.value = data.music_comment.total;
};

const initList = () => {
  page.value = 1;
  commentList.value = [];
  more.value = true;
  getCommentList();
};

const load = () => {
  if (more.value) {
    page.value++;
    getCommentList();
  }
};

const visiChange = async (e) => {
  if (e) {
    const { data } = await songsMy();
    songsList.value = data.songs;
  }
};

const visiCommand = async (e) => {
  const { code, data } = await songsListAdd({
    songs_id: e.id,
    music_id: route.query.id,
  });
  if (code == 200) {
    ElMessage.success("添加成功");
  }
};

const isCollect = async () => {
  const { data } = await musicCollectIsCollect({
    music_id: route.query.id,
  });
  collect.value = data.is_collect;
};

const publishComment = async (e) => {
  const { code, data } = await musicCommentAdd({
    parent_id: e,
    music_id: route.query.id,
    content: comment.value,
  });
  if (code == 200) {
    ElMessage.success(e ? "回复成功" : "评论成功");
    comment.value = "";
    initList();
  }
};

const like = async (e, i) => {
  if (e.is_like) {
    const { code, data } = await musicLikeDel({
      music_comment_id: e.id,
    });
    if (code == 200) {
      commentList.value[i].is_like = false;
    }
  } else {
    const { code, data } = await musicLikeAdd({
      music_comment_id: e.id,
    });
    if (code == 200) {
      commentList.value[i].is_like = true;
    }
  }
};

const musicCollect = async () => {
  if (collect.value) {
    const { code, data } = await musicCollectDel({
      music_id: route.query.id,
    });
    if (code == 200) {
      collect.value = false;
    }
  } else {
    const { code, data } = await musicCollectAdd({
      music_id: route.query.id,
    });
    if (code == 200) {
      collect.value = true;
    }
  }
};

const getInfo = async () => {
  const { data } = await musicInfo({
    id: route.query.id,
  });
  info.value = data.music;
};

watch(
  () => route.query,
  (newValue, oldValue) => {
    if (route.path != "/music") return;
    initList();
    getInfo();
    isCollect();
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
